<template>
  <div class="diffusion">
    <div class="anim_1"></div>
    <div class="anim_2"></div>
    <!-- <div class="anim_3"></div> -->
  </div>
</template>
<style>
.diffusion {
  height: 140vh;
  width: 140vh;
  left: calc(50% - 70vh);
  bottom: -35vh;
  position: absolute;
  border-radius: 50%;
}
.diffusion > div {
  background: radial-gradient(rgba(0, 48, 118, 0.5), rgba(157, 197, 254, 0.5));
  animation-name: diffusion;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border-radius: 50%;
  position: absolute;
}
.anim_2 {
  animation-delay: 1.5s;
}
/* .anim_3 {
  animation-delay: 2s;
} */
@keyframes diffusion {
  from {
    height: 40vh;
    width: 40vh;
    top: 50vh;
    left: 50vh;
    opacity: 0.3;
  }
  to {
    height: 140vh;
    width: 140vh;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
</style>